<template>
  <div class="visitor-index">
    <a-row class="aRow-wrapper" :gutter="12">
      <a-col class="listContent-wrapper" :span="24">
        <div class="title-wrapper-box">
          <crumbs :content="content" :updateTime="false"></crumbs>
        </div>
        <div class="l-w_content">
          <div class="l-w_c_content">
            <div class="pageInfo">
              <div class="tab-info">
                <a-anchor
                  :affix="false"
                  :bounds="400"
                  class="anchor-wrapper"
                  :get-current-anchor="getCurrentAnchor"
                  :getContainer="getContainerBack"
                >
                  <a-anchor-link
                    :href="`#${item.title}`"
                    :title="item.name"
                    v-for="(item, index) in tabList"
                    :key="index"
                  />
                </a-anchor>
              </div>
              <div class="right-content">
                <div>
                  <div id="basic-anchor">
                    <div class="common-title">
                      <div class="icon"></div>
                      <div class="content">基础信息</div>
                    </div>
                    <div class="content-wrapper">
                      <div class="flex" style="flex-direction: column">
                        <div class="info-wrap" style="width: 50%">
                          <div class="label common-lable">姓名</div>
                          <div class="value common-value">{{ minor.name || '暂无' }}</div>
                        </div>

                        <div class="flex">
                          <div class="info-wrap" style="width: 50%">
                            <div class="label common-lable">性别</div>
                            <div class="value common-value">{{ minor.sex == 1 ? '男' : '女' }}</div>
                          </div>
                        </div>
                        <div class="flex">
                          <div class="info-wrap wid">
                            <div class="label common-lable">年龄</div>
                            <div class="value common-value">
                              {{ minor.age || '暂无' }}
                            </div>
                          </div>
                        </div>

                        <div class="flex">
                          <div class="info-wrap wid">
                            <div class="label common-lable">民族</div>
                            <div class="value common-value">{{ minor.nationName || '暂无' }}</div>
                          </div>
                        </div>
                        <div class="flex">
                          <div class="info-wrap wid">
                            <div class="label common-lable">身份证号</div>
                            <div class="value common-value">{{ minor.idCard || '暂无' }}</div>
                          </div>
                        </div>
                        <div class="renlians flex">
                          <div class="info-wrap f1">
                            <div class="label common-lable">近期照片</div>
                            <div class="personImg flexCss" style="flex: 1;height: 100%;">  <img
                              :src="`${imgPrefix}${minor.minorImage}`"
                             
                              
                            ></img></div>
                          </div>
                          <div class="info-wrap f1" style="background-color:#1970F6;">
                            <div class="label common-lable">风险分数</div>
                            <div class="tsvalue flexCss" style="">{{ minor.totalCcore!==null && minor.totalCcore!==undefined ? minor.totalCcore : '暂无' }}</div>
                          </div>
                        </div>
                        <!--   <div class="info-wrap wid">
                          <div class="label common-lable">联系电话</div>
                          <div class="value common-value">
                            {{ wbMentalPatientBean.bloodType || '暂无' }}
                          </div>
                        </div> -->
                      </div>

                      <div class="flex" style="width: 100%">
                        <div style="display: flex; flex-direction: column; flex: 1">
                          <div class="info-wrap f1">
                            <div class="label common-lable">联系电话</div>
                            <div class="value common-value">{{minor.phone || '暂无' }}</div>
                          </div>

                          <div class="info-wrap f1">
                            <div class="label common-lable">风险等级</div>
                            <div class="value common-value"><a-tag :color="minor.levelColor">{{ minor.levelNname || '暂无' }}</a-tag></div>
                          </div>
                        </div>

                        <div class="info-wrap f1">
                          <div class="label common-lable" style="line-height: 0.6rem">干预响应措施</div>
                          <div class="value common-value">{{ minor.actions || '暂无' }}</div>
                        </div>
                      </div>

                      <div class="flex">
                        <div class="info-wrap f1">
                          <div class="label common-lable">人员标签</div>
                          <div class="value common-value">
                            <a-tag v-for="item in youthTypeList" :key="item" color="#108ee9">{{ item }}</a-tag>
                          </div>
                        </div>
                      </div>

                      <div class="flex">
                        <div class="info-wrap f1">
                          <div class="label common-lable">户籍地址</div>
                          <div class="value common-value">
                            {{ minor.homeAddress || '暂无' }}
                          </div>
                        </div>
                      </div>
                      <div class="flex">
                        <div class="info-wrap f1">
                          <div class="label common-lable">现居地址</div>
                          <div class="value common-value">
                            {{minor.address || '暂无' }}
                          </div>
                        </div>
                      </div>
                      <div class="flex">
                        <div class="info-wrap f1">
                          <div class="label common-lable">派出所</div>
                          <div class="value common-value">
                            {{ minor.policeAgencyName || '暂无' }}
                          </div>
                        </div>
                       
                      </div>

                      <div class="flex">
                        <div class="info-wrap f1">
                          <div class="label common-lable">添加人</div>
                          <div class="value common-value">
                            {{ minor.createBy || '暂无' }}
                          </div>
                        </div>
                        <div class="info-wrap f1">
                          <div class="label common-lable">添加时间</div>
                          <div class="value common-value">
                            {{ minor.createTime || '暂无' }}
                          </div>
                        </div>
                      </div>
                      <div class="flex">
                        <div class="info-wrap f1">
                          <div class="label common-lable">更新人</div>
                          <div class="value common-value">
                            {{minor.updateBy || '暂无' }}
                          </div>
                        </div>
                        <div class="info-wrap f1">
                          <div class="label common-lable">更新时间</div>
                          <div class="value common-value">
                            {{ minor.updateTime|| '暂无' }}
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>

                  <div id="caring-anchor">
                    <div style="position: relative; padding: 10px 0">
                      <div class="common-title">
                        <div class="icon"></div>
                        <div class="content">职业与收入</div>
                      </div>
                       <div class="add-btn cursor" style="" @click="handleAddCareer('edit')" v-if="career">+ 编辑</div>
                      <div class="add-btn cursor" style="" @click="handleAddCareer('add')" v-else>+ 新增</div>
                      
                     <!--  <div class="add-btn cursor" style="position: absolute; right: 8%" @click="handelCaring">
                        查看全部记录
                      </div> -->
                    </div>

                    <div class="content-wrapper">
                      <div class="flex">
                        <div class="info-wrap f1">
                          <div class="label common-lable">职业状态</div>
                          <div class="value common-value">
                            {{ career?.occupationStatusName || '暂无' }}
                          </div>
                        </div>
                        <div class="info-wrap f1" v-if="career?.occupationStatus == 1">
                          <div class="label common-lable">职位</div>
                          <div class="value common-value">{{ career?.position || '暂无' }}</div>
                        </div>
                      </div>
                     

                      

                      <div class="flex">
                        <div class="info-wrap f1" v-if="career?.occupationStatus == 1">
                          <div class="label common-lable">从业单位名称</div>
                          <div class="value common-value">
                            {{ career?.employer || '暂无' }}
                          </div>
                        </div>
                        <div class="info-wrap f1">
                          <div class="label common-lable">收入情况</div>
                          <div class="value common-value">
                            {{ career?.incomeLevelName || '暂无' }}
                          </div>
                        </div>
                      </div>

                     
                   
                      <div class="flex">
                        <div class="info-wrap f1">
                          <div class="label common-lable">备注信息</div>
                          <div class="value common-value">
                            {{ career?.notes|| '暂无' }}
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div id="caring-anchor">
                    <div style="position: relative; padding: 10px 0">
                      <div class="common-title">
                        <div class="icon"></div>
                        <div class="content">家庭情况</div>
                      </div>
                      <div class="add-btn cursor" style="" @click="AddFaimlySituation('add')" v-if="!familyEnvironment">+ 新增</div>
                     <div class="add-btn cursor" style="" @click="AddFaimlySituation('edit')" v-else>+ 编辑</div>
                    </div>

                 <div class="content-wrapper">
                      <div class="flex">
                        <div class="info-wrap f1">
                          <div class="label common-lable">居住情况</div>
                          <div class="value common-value">
                            {{ familyEnvironment?.residenceStatusName || '暂无' }}
                          </div>
                        </div>
                        <div class="info-wrap f1">
                          <div class="label common-lable">家庭收入状况</div>
                          <div class="value common-value">{{ familyEnvironment?.incomeLevelName || '暂无' }}</div>
                        </div>
                      </div>
                     

                      

                      <div class="flex">
                        <div class="info-wrap f1">
                          <div class="label common-lable">婚姻状况</div>
                          <div class="value common-value">
                            {{ familyEnvironment?.maritalStatusName || '暂无' }}
                          </div>
                        </div>
                        <div class="info-wrap f1">
                          <div class="label common-lable">家庭环境</div>
                          <div class="value common-value">
                            {{ familyEnvironment?.familyRelationshipName || '暂无' }}
                          </div>
                        </div>
                      </div>

                     
                   
                      <div class="flex">
                        <div class="info-wrap f1">
                          <div class="label common-lable">备注信息</div>
                          <div class="value common-value">
                            {{ familyEnvironment?.notes || '暂无' }}
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>

                  <div id="caring-anchor1">
                    <div class="common-title">
                      <div class="icon"></div>
                      <div class="content">个人与社会关系</div>
                    </div>
                    <!--  <medication-record /> -->
                    <div class="content-wrapper">
                      <div class="flex">
                        <div class="info-wrap f1">
                          <div class="label common-lable">性格心理特征</div>
                          <div class="value common-value">暂无 </div>
                        </div>
                        <!--  <div class="info-wrap f1">
                          <div class="label common-lable">家庭类型</div>
                          <div class="value common-value">{{ wbMentalPatientBean.patientLevel || '暂无' }}</div>
                        </div> -->
                      </div>
                      <div class="flex">
                        <div class="info-wrap f1">
                          <div class="label common-lable">社会支持系统</div>
                          <div class="value common-value">暂无</div>
                        </div>
                      </div>

                      <div class="flex">
                        <div class="info-wrap f1">
                          <div class="label common-lable">重大生活变故</div>
                          <div class="value common-value">暂无</div>
                        </div>
                      </div>
                    </div>
                  </div>

                  <div id="medicine-anchor">
                    <div style="position: relative; padding: 10px 0">
                      <div class="common-title">
                        <div class="icon"></div>
                        <div class="content">行为风险迹象</div>
                      </div>
                      <div class="add-btn cursor" style="" @click="handelCaring">+ 新增</div>
                      <div class="add-btn cursor" style="position: absolute; right: 8%" @click="handelCaring">
                        查看全部记录
                      </div>
                      <div class="add-btn cursor" style="position: absolute; right: 8%" @click="handelCaring">
                        查看全部记录
                      </div>
                    </div>
                    <a-table
                      rowKey="id"
                      class="wearing-table"
                      :columns="badheviorColumns"
                      :dataSource="dataSource"
                      :pagination="false"
                    >
                      <template slot="isResponsible" slot-scope="text, records">
                        <a-switch
                          v-model="records.status"
                          @change="
                            () => {
                              handleChangeResponsible(records)
                            }
                          "
                        />
                      </template>
                      <template slot="action" slot-scope="records">
                        <span class="operation deatil-color" @click="handleUnbind(records)">详情</span>

                        <span class="operation" style="color: #ff5e5e" @click="handleUnbind(records)">移除</span>
                      </template>
                    </a-table>
                    <!--  <div style="display: flex">
                      <a-table
                        v-for="(item, index) in careRecordColumns"
                        :key="index"
                        rowKey="id"
                        class="wearing-table"
                        :columns="[item]"
                        :dataSource="item.value"
                        :pagination="false"
                        :style="{ width: '270px' }"
                      >
                        <template slot="action" slot-scope="records"> </template>
                      </a-table>
                    </div> -->
                  </div>
                  <div id="disease-anchor">
                    <div style="position: relative; padding: 10px 0">
                      <div class="common-title">
                        <div class="icon"></div>
                        <div class="content">管控与干预记录模块</div>
                      </div>
                      <div class="add-btn cursor" @click="handelCaring">+ 新增</div>
                      <div class="add-btn cursor" style="position: absolute; right: 8%" @click="handelCaring">
                        查看全部记录
                      </div>
                    </div>
                    <a-table
                      rowKey="id"
                      class="wearing-table"
                      :columns="careGroupColumns"
                      :dataSource="dataSource"
                      :pagination="false"
                    >
                      <template slot="isResponsible" slot-scope="text, records">
                        <a-switch
                          v-model="records.status"
                          @change="
                            () => {
                              handleChangeResponsible(records)
                            }
                          "
                        />
                      </template>
                      <template slot="action" slot-scope="records">
                        <span class="operation deatil-color" @click="handleUnbind(records)">详情</span>
                        <!--  <span class="operation deatil-color" @click="handleUnbind(records)">编辑</span> -->
                        <span class="operation" style="color: #ff5e5e" @click="handleUnbind(records)">移除</span>
                      </template>
                    </a-table>
                    <!--  <div style="display: flex">
                      <a-table
                        v-for="(item, index) in careRecordColumns"
                        :key="index"
                        rowKey="id"
                        class="wearing-table"
                        :columns="[item]"
                        :dataSource="item.value"
                        :pagination="false"
                        :style="{ width: '270px' }"
                      >
                        <template slot="action" slot-scope="records"> </template>
                      </a-table>
                    </div> -->
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </a-col>
    </a-row>
    <select-caring-person ref="selectCaringPersonRef" @success="onSelectSuccess" />
     <AddCareer ref="addCareerRef" :tid="minorId" @refresh="onRefresh" />
     <AddFamilySituation ref="addFamilySituationRef" :tid="minorId" @refresh="onRefresh" />"
    <allMessage
      ref="allMessage"
      :title="confirmTitle"
      :content="confirmContent"
      :publicVisible="publicVisible"
      @cancel="publicVisible = false"
      @tipMessage="tipMessage"
    ></allMessage>
  </div>
</template>

<script lang="jsx">
import leftTree from '@/components/leftTree'
import topTitle from '@/components/topTitle'
import echartRisk from './modules/echarts'
import list from './modules/list'
import Add from './modules/add'
import { getCommunityList,findEnableDictItemsbyCode } from '@/api/api'
import CallLogList from './modules/callLogList'
import SelectCaringPerson from './modules/selectCaringPerson.vue'
import AddFamilySituation from './modules/addFamilySituation.vue'
import {
  DiseaseIncidenceRecordmentalpatientBingding,
  setResponsibl,
  MedicationRecordePerson,
  mentalpatientBingding,
  setResponsiblePerson,
  selectMinorpageDetails,
} from '../../../api/api'
import allMessage from '@/components/allMessage'
import MedicationRecord from './modules/medicationRecord.vue'
import DiseaseIncidenceRecord from './modules/diseaseIncidenceRecord.vue'
import EquipmentWarning from './modules/equipmentWarning.vue'
import AddCareer from './modules/addCareer.vue'
import crumbs from '@/components/crumbs'

export default {
  name: 'pringing',
  components: {
    leftTree,
    topTitle,
    list,
    Add,
    CallLogList,
    SelectCaringPerson,
    allMessage,
    MedicationRecord,
    DiseaseIncidenceRecord,
    EquipmentWarning,
    crumbs,
    echartRisk,
    AddCareer,
     AddFamilySituation,
  },
  data() {
    return {
      content: [
        {
          title: '返回上级',
          path: '/careFamily/teenagerProfile/index',
        },
        {
          title: '档案详情',
        },
      ],
      activeKey: 0,
      dataSource: [],
      key: '',
      selectedKey: '',
      addRef: null,
      addCareerRef:null,
      addFamilySituationRef:null,
      minorId:"",
      tabList: [
        {
          title: 'basic-anchor',
          name: '基础信息',
        },
        {
          title: 'caring-anchor',
          name: '职业与收入',
        },
        {
          title: 'caring-anchor1',
          name: '家庭情况',
        },
        {
          title: 'medicine-anchor',
          name: '健康与行为',
        },
        {
          title: 'disease-anchor',
          name: '社会环境',
        },
        {
          title: 'history-anchor',
          name: '历史矛盾纠纷',
        },
        {
          title: 'conflict-anchor',
          name: '矛盾纠纷调处人员',
        },
        {
          title: 'disease-anchor',
          name: '当前主要纠纷',
        },
        {
          title: 'riskRecord-anchor',
          name: '风险评分',
        },
        {
          title: 'behivorRisk-anchor',
          name: '行为风险迹象',
        },
        {
          title: 'controlRecord-anchor',
          name: '管控与干预记录',
        },
      ],
      detail: {},
      careColumns: [
        {
          title: '序号',
          align: 'center',
          width: 100,
          customRender: function (t, r, index) {
            return parseInt(index) + 1
          },
        },
        {
          title: '矛盾纠纷名称',
          align: 'center',
          dataIndex: 'helpPersonTypeText',
          customRender: (t) => {
            return (
              <a-tooltip placement="top">
                <template slot="title">
                  <span>{t}</span>
                </template>
                <div class="ant-table-row-cell-ellipsis">{t}</div>
              </a-tooltip>
            )
          },
        },
        {
          title: '发生时间',
          align: 'center',
          dataIndex: 'helpName',
          ellipsis: true,
          customRender: (t) => {
            return (
              <a-tooltip placement="top">
                <template slot="title">
                  <span>{t}</span>
                </template>
                <div class="ant-table-row-cell-ellipsis">{t}</div>
              </a-tooltip>
            )
          },
        },
        /* {
          title: '设为主要负责人',
          align: 'center',
          dataIndex: 'isResponsible',
          ellipsis: true,
          width: 140,
          scopedSlots: { customRender: 'isResponsible' },
        }, */
        {
          title: '纠纷一级分类',
          align: 'center',
          dataIndex: 'helpIdCard3',
          ellipsis: true,
          customRender: (t) => {
            return (
              <a-tooltip placement="top">
                <template slot="title">
                  <span>{t}</span>
                </template>
                <div class="ant-table-row-cell-ellipsis">{t}</div>
              </a-tooltip>
            )
          },
        },
        {
          title: '纠纷二级分类',
          align: 'center',
          dataIndex: 'helpPhone',
          ellipsis: true,
          customRender: (t) => {
            return (
              <a-tooltip placement="top">
                <template slot="title">
                  <span>{t}</span>
                </template>
                <div class="ant-table-row-cell-ellipsis">{t}</div>
              </a-tooltip>
            )
          },
        },
        {
          title: '当前阶段',
          align: 'center',
          dataIndex: 'orgName1',
          ellipsis: true,
          customRender: (t) => {
            return (
              <a-tooltip placement="top">
                <template slot="title">
                  <span>{t}</span>
                </template>
                <div class="ant-table-row-cell-ellipsis">{t}</div>
              </a-tooltip>
            )
          },
        },
        {
          title: '风险等级',
          align: 'center',
          dataIndex: 'issuedStatus',
          customRender(t) {
            return t == 1 ? '已下发' : '未下发'
          },
          ellipsis: true,
        },
        /* {
          title: '绑定时间',
          align: 'center',
          dataIndex: 'createTime',
          ellipsis: true,
          customRender: (t) => {
            return (
              <a-tooltip placement="top">
                <template slot="title">
                  <span>{t}</span>
                </template>
                <div class="ant-table-row-cell-ellipsis">{t}</div>
              </a-tooltip>
            )
          },
        }, */
        {
          title: '操作',
          scopedSlots: { customRender: 'action' },
          ellipsis: true,
          align: 'center',
          width: 200,
          fixed: 'right',
        },
      ],
      historyColumns: [
        {
          title: '序号',
          align: 'center',
          width: 100,
          customRender: function (t, r, index) {
            return parseInt(index) + 1
          },
        },
        {
          title: '矛盾纠纷名称',
          align: 'center',
          dataIndex: 'helpPersonTypeText',
          customRender: (t) => {
            return (
              <a-tooltip placement="top">
                <template slot="title">
                  <span>{t}</span>
                </template>
                <div class="ant-table-row-cell-ellipsis">{t}</div>
              </a-tooltip>
            )
          },
        },
        {
          title: '发生时间',
          align: 'center',
          dataIndex: 'helpName',
          ellipsis: true,
          customRender: (t) => {
            return (
              <a-tooltip placement="top">
                <template slot="title">
                  <span>{t}</span>
                </template>
                <div class="ant-table-row-cell-ellipsis">{t}</div>
              </a-tooltip>
            )
          },
        },
        /* {
          title: '设为主要负责人',
          align: 'center',
          dataIndex: 'isResponsible',
          ellipsis: true,
          width: 140,
          scopedSlots: { customRender: 'isResponsible' },
        }, */
        {
          title: '纠纷一级分类',
          align: 'center',
          dataIndex: 'helpIdCard20',
          ellipsis: true,
          customRender: (t) => {
            return (
              <a-tooltip placement="top">
                <template slot="title">
                  <span>{t}</span>
                </template>
                <div class="ant-table-row-cell-ellipsis">{t}</div>
              </a-tooltip>
            )
          },
        },
        {
          title: '纠纷二级分类',
          align: 'center',
          dataIndex: 'helpPhone',
          ellipsis: true,
          customRender: (t) => {
            return (
              <a-tooltip placement="top">
                <template slot="title">
                  <span>{t}</span>
                </template>
                <div class="ant-table-row-cell-ellipsis">{t}</div>
              </a-tooltip>
            )
          },
        },
        {
          title: '处理结果',
          align: 'center',
          dataIndex: 'orgName2',
          ellipsis: true,
          customRender: (t) => {
            return (
              <a-tooltip placement="top">
                <template slot="title">
                  <span>{t}</span>
                </template>
                <div class="ant-table-row-cell-ellipsis">{t}</div>
              </a-tooltip>
            )
          },
        },

        /* {
          title: '绑定时间',
          align: 'center',
          dataIndex: 'createTime',
          ellipsis: true,
          customRender: (t) => {
            return (
              <a-tooltip placement="top">
                <template slot="title">
                  <span>{t}</span>
                </template>
                <div class="ant-table-row-cell-ellipsis">{t}</div>
              </a-tooltip>
            )
          },
        }, */
        {
          title: '操作',
          scopedSlots: { customRender: 'action' },
          ellipsis: true,
          align: 'center',
          width: 200,
          fixed: 'right',
        },
      ],

      badheviorColumns: [
        {
          title: '序号',
          align: 'center',
          width: 100,
          customRender: function (t, r, index) {
            return parseInt(index) + 1
          },
        },
        {
          title: '日期',
          align: 'center',
          dataIndex: 'helpPersonTypeText',
          customRender: (t) => {
            return (
              <a-tooltip placement="top">
                <template slot="title">
                  <span>{t}</span>
                </template>
                <div class="ant-table-row-cell-ellipsis">{t}</div>
              </a-tooltip>
            )
          },
        },
        {
          title: '风险迹象类型',
          align: 'center',
          dataIndex: 'helpName',
          ellipsis: true,
          customRender: (t) => {
            return (
              <a-tooltip placement="top">
                <template slot="title">
                  <span>{t}</span>
                </template>
                <div class="ant-table-row-cell-ellipsis">{t}</div>
              </a-tooltip>
            )
          },
        },
        {
          title: '具体行为描述',
          align: 'center',
          dataIndex: 'isResponsible',
          ellipsis: true,
          width: 140,
          scopedSlots: { customRender: 'isResponsible' },
        },
        /* {
          title: '身份证号码',
          align: 'center',
          dataIndex: 'helpIdCard',
          ellipsis: true,
          customRender: (t) => {
            return (
              <a-tooltip placement="top">
                <template slot="title">
                  <span>{t}</span>
                </template>
                <div class="ant-table-row-cell-ellipsis">{t}</div>
              </a-tooltip>
            )
          },
        }, */
        {
          title: '信息源',
          align: 'center',
          dataIndex: 'helpPhone',
          ellipsis: true,
          customRender: (t) => {
            return (
              <a-tooltip placement="top">
                <template slot="title">
                  <span>{t}</span>
                </template>
                <div class="ant-table-row-cell-ellipsis">{t}</div>
              </a-tooltip>
            )
          },
        },
        {
          title: '处理情况',
          align: 'center',
          dataIndex: 'orgName3',
          ellipsis: true,
          customRender: (t) => {
            return (
              <a-tooltip placement="top">
                <template slot="title">
                  <span>{t}</span>
                </template>
                <div class="ant-table-row-cell-ellipsis">{t}</div>
              </a-tooltip>
            )
          },
        },
        {
          title: '风险等级',
          align: 'center',
          dataIndex: 'orgName4',
          ellipsis: true,
          customRender: (t) => {
            return (
              <a-tooltip placement="top">
                <template slot="title">
                  <span>{t}</span>
                </template>
                <div class="ant-table-row-cell-ellipsis">{t}</div>
              </a-tooltip>
            )
          },
        },
        /* {
          title: '备注信息',
          align: 'center',
          dataIndex: 'issuedStatus',
          customRender(t) {
            return t == 1 ? '已下发' : '未下发'
          },
          ellipsis: true,
        }, 
        /* {
          title: '绑定时间',
          align: 'center',
          dataIndex: 'createTime',
          ellipsis: true,
          customRender: (t) => {
            return (
              <a-tooltip placement="top">
                <template slot="title">
                  <span>{t}</span>
                </template>
                <div class="ant-table-row-cell-ellipsis">{t}</div>
              </a-tooltip>
            )
          },
        }, */
        {
          title: '操作',
          scopedSlots: { customRender: 'action' },
          ellipsis: true,
          align: 'center',
          width: 200,
          fixed: 'right',
        },
      ],
      careGroupColumns: [
        {
          title: '序号',
          align: 'center',
          width: 100,
          customRender: function (t, r, index) {
            return parseInt(index) + 1
          },
        },
        {
          title: '日期',
          align: 'center',
          dataIndex: 'helpPersonTypeText',
          customRender: (t) => {
            return (
              <a-tooltip placement="top">
                <template slot="title">
                  <span>{t}</span>
                </template>
                <div class="ant-table-row-cell-ellipsis">{t}</div>
              </a-tooltip>
            )
          },
        },
        {
          title: '干预类型',
          align: 'center',
          dataIndex: 'helpName',
          ellipsis: true,
          customRender: (t) => {
            return (
              <a-tooltip placement="top">
                <template slot="title">
                  <span>{t}</span>
                </template>
                <div class="ant-table-row-cell-ellipsis">{t}</div>
              </a-tooltip>
            )
          },
        },
        /* {
          title: '设为主要负责人',
          align: 'center',
          dataIndex: 'isResponsible',
          ellipsis: true,
          width: 140,
          scopedSlots: { customRender: 'isResponsible' },
        }, */
        {
          title: '参与人员',
          align: 'center',
          dataIndex: 'helpIdCard1',
          ellipsis: true,
          customRender: (t) => {
            return (
              <a-tooltip placement="top">
                <template slot="title">
                  <span>{t}</span>
                </template>
                <div class="ant-table-row-cell-ellipsis">{t}</div>
              </a-tooltip>
            )
          },
        },
        {
          title: '干预内容纲要',
          align: 'center',
          dataIndex: 'helpIdCard2',
          ellipsis: true,
          customRender: (t) => {
            return (
              <a-tooltip placement="top">
                <template slot="title">
                  <span>{t}</span>
                </template>
                <div class="ant-table-row-cell-ellipsis">{t}</div>
              </a-tooltip>
            )
          },
        },

        {
          title: '风险等级',
          align: 'center',
          dataIndex: 'orgName5',
          ellipsis: true,
          customRender: (t) => {
            return (
              <a-tooltip placement="top">
                <template slot="title">
                  <span>{t}</span>
                </template>
                <div class="ant-table-row-cell-ellipsis">{t}</div>
              </a-tooltip>
            )
          },
        },
        /* {
          title: '备注信息',
          align: 'center',
          dataIndex: 'issuedStatus',
          customRender(t) {
            return t == 1 ? '已下发' : '未下发'
          },
          ellipsis: true,
        }, */
        /* {
          title: '绑定时间',
          align: 'center',
          dataIndex: 'createTime',
          ellipsis: true,
          customRender: (t) => {
            return (
              <a-tooltip placement="top">
                <template slot="title">
                  <span>{t}</span>
                </template>
                <div class="ant-table-row-cell-ellipsis">{t}</div>
              </a-tooltip>
            )
          },
        }, */
        {
          title: '操作',
          scopedSlots: { customRender: 'action' },
          ellipsis: true,
          align: 'center',
          width: 200,
          fixed: 'right',
        },
      ],
      careRecordColumns: [],
      wearingPersonnelList: [],
      abnormalDataColumns: [
        {
          title: '序号',
          align: 'center',
          width: 100,
          customRender: function (t, r, index) {
            return parseInt(index) + 1
          },
        },
        {
          title: '类型',
          align: 'center',
          dataIndex: 'fHjdzQhnxxdz',
        },
        {
          title: '发生时间',
          align: 'center',
          dataIndex: 'fYfzgx',
          ellipsis: true,
        },
        {
          title: '发生地点',
          align: 'center',
          dataIndex: 'policeAgencyName',
          ellipsis: true,
        },
      ],
      loveingColumns: [
        {
          title: '序号',
          align: 'center',
          width: 100,
          customRender: function (t, r, index) {
            return parseInt(index) + 1
          },
        },
        // {
        //   title: '设备类型',
        //   align: 'center',
        //   dataIndex: 'deviceType',
        // },
        {
          title: '上报时间',
          align: 'center',
          dataIndex: 'imei',
          ellipsis: true,
        },
        {
          title: '活动地点',
          align: 'center',
          dataIndex: 'onLine',
          ellipsis: true,
          customRender: (t) => {
            return t == 1 ? '在线' : '离线'
          },
        },
        {
          title: '活动形式',
          align: 'center',
          dataIndex: 'address',
          ellipsis: true,
        },
        {
          title: '参与小组成员',
          align: 'center',
          dataIndex: 'address1',
          ellipsis: true,
        },
        {
          title: '操作',
          scopedSlots: { customRender: 'action' },
          ellipsis: true,
          align: 'center',
          width: 200,
          fixed: 'right',
        },
      ],
      scoreColumns: [
        {
          title: '序号',
          align: 'center',
          width: 100,
          customRender: function (t, r, index) {
            return parseInt(index) + 1
          },
        },
        // {
        //   title: '设备类型',
        //   align: 'center',
        //   dataIndex: 'deviceType',
        // },
        {
          title: '评估月份',
          align: 'center',
          dataIndex: 'imei',
          ellipsis: true,
        },
        {
          title: '本月基础分',
          align: 'center',
          dataIndex: 'onLine',
          ellipsis: true,
          customRender: (t) => {
            return t == 1 ? '在线' : '离线'
          },
        },
        {
          title: '本月印象分',
          align: 'center',
          dataIndex: 'address',
          ellipsis: true,
        },
        {
          title: '本月不良行为积分',
          align: 'center',
          dataIndex: 'address1',
          ellipsis: true,
        },
        {
          title: '本月总分变化',
          align: 'center',
          dataIndex: 'address11',
          ellipsis: true,
        },
        {
          title: '本月末总分',
          align: 'center',
          dataIndex: 'address111',
          ellipsis: true,
        },
        {
          title: '当前风险等级',
          align: 'center',
          dataIndex: 'address1111',
          ellipsis: true,
        },
        {
          title: '操作',
          scopedSlots: { customRender: 'action' },
          ellipsis: true,
          align: 'center',
          width: 200,
          fixed: 'right',
        },
      ],
      badColumns: [
        {
          title: '序号',
          align: 'center',
          width: 100,
          customRender: function (t, r, index) {
            return parseInt(index) + 1
          },
        },
        // {
        //   title: '设备类型',
        //   align: 'center',
        //   dataIndex: 'deviceType',
        // },
        {
          title: '上报时间',
          align: 'center',
          dataIndex: 'imei',
          ellipsis: true,
        },
        {
          title: '上报人',
          align: 'center',
          dataIndex: 'onLine',
          ellipsis: true,
          customRender: (t) => {
            return t == 1 ? '在线' : '离线'
          },
        },
        {
          title: '行为类型与等级',
          align: 'center',
          dataIndex: 'address',
          ellipsis: true,
        },
        {
          title: '最终计入积分',
          align: 'center',
          dataIndex: 'address2',
          ellipsis: true,
        },
        {
          title: '审核时间',
          align: 'center',
          dataIndex: 'address3',
          ellipsis: true,
        },
        {
          title: '操作',
          scopedSlots: { customRender: 'action' },
          ellipsis: true,
          align: 'center',
          width: 200,
          fixed: 'right',
        },
      ],
      timeType: 'day',
      map: null,
      markerList: [],
      drawing: false,
      ploygonList: [],
      selectCaringPersonRef: null,
      minor: {},

      tableWidth: 0,
      confirmTitle: '',
      confirmContent: '',
      allMessage: null,
      publicVisible: false,
      youthTypeList:[],
      imgPrefix:'',
      career:{},
      familyEnvironment:{},
      

      

      

    }
  },
   created() {
    this.get_dict()
  },
  mounted() {
    // this.activeKey = this.$route.query.activeKey ? this.$route.query.activeKey : 0
    // this.initMap()
    this.initData()
  },
  methods: {
        async get_dict() {
      let res = await findEnableDictItemsbyCode({ code: 'static_server' })
      this.imgPrefix = res.result[0].value
    },
    initData() {
      selectMinorpageDetails({
        id: this.$route.query.id,
      }).then((res) => {
        console.log(res.result, '青壮年')
        const { minor,career,familyEnvironment } = res.result
        this.minor = minor
          this.minorId = minor.id
        
      this.youthTypeList=  minor.youthTypeName.split(',')
      this.career = career
      this.familyEnvironment = familyEnvironment

        // this.$refs.echartRiskRef.initChart()
      })
    },
    handleAddCareer(type){
      console.log(type,'type')
      type == 'add'?  this.$refs.addCareerRef.show(): this.$refs.addCareerRef.show(this.career,'edit')
    
      
     
    },
    handleEditCareer(){
     
    },
    onRefresh() {
      this.initData()
    },
    handelClick(event) {
      this.activeKey = event
      this.searchTableData()
    },
    onTreeSelected(selectedKeys) {
      this.selectedKey = Array.isArray(selectedKeys) ? selectedKeys[0] : ''
      if (this.selectedKey) {
        this.searchTableData()
        this.loadDataWithTree({
          policeAgencyId: this.selectedKey,
        })
      }
    },
    searchTableData() {
      this.$nextTick(() => {
        // 调用各个组件的 search 方法
        this.$refs.listRef.searchQuery()
      })
    },
    AddFaimlySituation(type){
     type=='add'? this.$refs.addFamilySituationRef.show(): this.$refs.addFamilySituationRef.show(this.familyEnvironment,'edit')

    },
    handleChange() {},
    onChange() {},
    initMap() {
      this.map = new AMap.Map('map-box', {
        resizeEnable: true,
        center: [116.397428, 39.90923],
        zoom: 13,
      })
      this.map.on('click', (e) => {
        const position = [e.lnglat.lng, e.lnglat.lat]
        //如果没有 marker 则添加 ，否则新增
        this.addMarker(this.map, position)
      })
    },
    addMarker(map, position) {
      var marker = new AMap.Marker({
        position: position,
        icon: new AMap.Icon({
          image: '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png',
          size: new AMap.Size(25, 34),
          imageSize: new AMap.Size(25, 34), //图标大小
        }),
        anchor: 'bottom-center',
        offset: new AMap.Pixel(0, 0),
      })

      marker.setMap(map)

      // 设置鼠标划过点标记显示的文字提示
      marker.setTitle('我是marker的title')

      // 设置label标签
      // label默认蓝框白底左上角显示，样式className为：amap-marker-label
      marker.setLabel({
        direction: 'top',
        offset: new AMap.Pixel(0, 0), //设置文本标注偏移量
        content: `<div class='info'>点${this.markerList.length + 1}</div>`, //设置文本标注内容
      })

      this.markerList.push(marker)
    },
    // 开启鼠标绘制
    handleStartMouse() {
      this.drawing = true
    },
    // 四个点确定
    handleConfirmPoint() {
      if (this.markerList.length > 4) {
        this.$message.warning('绘制点数量不能超过4个！')
        return
      }
      let ploygonList = this.markerList.map((item) => {
        return item.getPosition()
      })
      this.addPloygon(ploygonList)
    },
    // 清除所有点
    handleClearPoint() {
      this.markerList.forEach((marker) => {
        marker.setMap(null)
      })
      this.markerList = []

      // 顺便移除之前的覆盖物
      this.ploygonList.forEach((ploygonInstance) => {
        this.map.remove(ploygonInstance)
      })
    },

    // 添加覆盖物
    addPloygon(polygonPath) {
      var polygon = new AMap.Polygon({
        path: polygonPath,
      })
      this.ploygonList.push(polygon)
      this.map.add([polygon])
    },
    handelCaring() {
      this.$refs.selectCaringPersonRef.show()
    },
    onSelectSuccess() {
      this.initData()
    },
    handleChangeResponsible(records) {
      setResponsiblePerson({
        helpId: records.id,
        mentalPatientPersonId: this.$route.query.id,
      })
        .then((res) => {
          this.$message.success(res.message)
          this.initData()
        })
        .catch(() => {
          // records.status = false
        })
    },
    handleUnbind(records) {
      this.confirmTitle = '解绑'
      this.confirmContent = '请确认是否解绑？'
      this.publicVisible = true
      this.$refs.allMessage.show(records)
    },
    tipMessage(records) {
      mentalpatientBingding({
        helpId: records.id,
        mentalPatientPersonId: this.$route.query.id,
        type: 2,
      }).then((res) => {
        this.publicVisible = false
        this.$message.success(res.message)
        this.initData()
      })
    },
    getCurrentAnchor() {
      return '#basic-anchor'
    },
    getContainerBack() {
      return document.querySelector('.right-content')
    },
  },
}
</script>
<style lang="less" scoped>
.visitor-index {
  width: 100%;
  height: 100%;
  .add-btn {
    width: 96px;
    height: 32px;
    border-radius: 4px;
    background-color: #1970f6;
    color: #fff;
    font-size: 14px;
    font-weight: 400;
    line-height: 32px;
  }
  .right-content {
    #basic-anchor {
      .content-wrapper {
        position: relative;
      }
    }
  }

  .wid {
    width: 50%;
  }
  .renlians {
    // margin-left: 50%;
    position: absolute;
    top: 0;
    left: 50%;
    height: 250px;
    width: 50%;
    .label {
      line-height: 250px;
      //text-align: center;
    }
  }
  .lg{
    line-height: 2rem;
  }
  .flexCss{
     display: flex;
    align-items: center;
    justify-content: center;

  }
   .personImg{
   

 img{
  width: 80%;
  height: 80%;
 }
  
  

  }
    .tsvalue{
    color:#FAFAFA;
    font-size: 30px;
    font-weight: 700;
    text-align: center;
    margin-left: 1.2rem;
    

  }
  .pageInfo {
    width: 100%;
    height: 100%;
    display: flex;
    .tab-info {
      width: 160px;
      height: 100%;
      background: var(--theme-container-bg);
      border-radius: 4px 4px 4px 4px;
      padding-top: 23px;
      margin-right: 8px;
      flex-shrink: 0;
      /deep/ .anchor-wrapper {
        background: unset;
        .ant-anchor {
          .ant-anchor-ink {
            &:nth-child(1) {
              display: none;
            }
          }
          .ant-anchor-link-title {
            font-weight: 500;
            font-size: 5rpx;
            color: #abd5ff;
            text-align: center;
            margin-bottom: 15px;
          }
          .ant-anchor-link-active {
            .ant-anchor-link-title {
              color: #fff;
            }
          }
        }
      }
    }
    .right-content {
      flex: 1;
      background: var(--theme-container-bg);
      padding: 21px 24px;
      overflow: auto;
      .common-title {
        display: flex;
        align-items: center;
        margin-bottom: 12px;
        margin-top: 12px;

        .icon {
          width: 6px;
          height: 6px;
          background: #abd5ff;
          border-radius: 50%;
          margin-right: 7px;
        }
        .content {
          font-weight: 500;
          font-size: 14px;
          color: var(--theme-tab-text-color);
        }
      }

      .wearing-table {
        /deep/.ant-table-thead > tr > th {
          height: 46px;
          background: #0946a8;
          border-radius: 0px 0px 0px 0px;
          border: 1px solid #0855cc;
          font-weight: 500;
          font-size: 14px;
          color: #8fbbff;
          border-right: 0;
          &:last-child {
            border-right: 1px solid #0855cc;
          }
        }
        /deep/ .ant-table-thead {
          border-right: 1px solid #0855cc;
        }
        /deep/ .ant-table-tbody .ant-table-row td {
          background: #07429e;
          border-radius: 0px 0px 0px 0px;
          border: 1px solid #0855cc;
          color: #ffffff;
          border-right: 0;
          border-top: 0;
        }

        /deep/.ant-table-placeholder {
          background-color: var(--theme-container-bg);
          border: 1px solid #0855cc;
          border-top: 0;
          .ant-empty-normal {
            color: #fff;
          }
        }
      }
      .content-wrapper {
        border-top: 1px solid #0855cc;
        border-left: 1px solid #0855cc;

        .info-wrap {
          display: flex;
          align-items: stretch;
          border-bottom: 1px solid #0855cc;
          border-right: 1px solid #0855cc;

          .label {
            background: #0946a8;
            width: 160px;
            padding: 14px 20px;
            font-weight: 500;
            font-size: 14px;
            color: #8fbbff;
            border-right: 1px solid #0855cc;
          }
          .value {
            font-weight: 400;
            font-size: 14px;
            color: #ffffff;
            padding: 14px 20px;
          }
        }
      }

      .time-select {
        display: flex;
        .time-btn-style {
          .ant-radio-button-wrapper {
            background: #06409a;
            border: 1px solid #0855cc;
            font-weight: 500;
            font-size: 14px;
            color: #8fbbff;
            &::before {
              width: 0;
            }
          }
          .ant-radio-button-wrapper-checked {
            background: #1970f6;
            border: 1px solid #1970f6;
          }
        }
        .time-range {
          width: 310px !important;
          margin-left: 8px;
        }
      }
    }
  }
  .title-wrapper-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .l-w_content {
    margin-left: 2px;
    height: calc(100% - 50px);
  }
  .right-inner-box {
    width: 100%;
    height: 100%;
    position: relative;
    #map-box {
      width: 100%;
      height: 100%;
    }
    .button-group {
      position: absolute;
      right: 10px;
      z-index: 10;
      padding-top: 6px;
      .i-btn {
        margin-right: 6px;
      }
    }
  }
}
</style>
